<template>
  <div class="video-tree-box">
    <cardPanel title="视频监控">
      <div class="video-tree-content custom-tree">
        <el-tree style="max-width: 600px" :data="treeList" default-expand-all>
          <template #default="{ node, data }">
            <div class="video-label">
              <span>{{ data.label }}</span>
              <p
                v-show="data.type && data.type === 'video'"
                @click="onOpenVideo(data)"
              >
                <el-icon size="22"><VideoCamera /></el-icon>
              </p>
            </div>
          </template>
        </el-tree>
      </div>
    </cardPanel>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import cardPanel from "@/components/cardPanel/index.vue";
import { videoStore } from "@/stores/video";

const store = videoStore();
const treeList: any = ref([]);

treeList.value = [
  {
    id: 1,
    label: "阳光城社区",
    children: [
      {
        id: 4,
        label: "巨丰小区",
        children: [
          {
            id: 9,
            label: "31号楼",
            type: "video",
          },
          {
            id: 10,
            label: "32号楼",
            type: "video",
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: "榆康社区",
    children: [
      {
        id: 5,
        label: "曼哈顿小区",
        children: [
          {
            id: 9,
            label: "10号楼",
            type: "video",
          },
          {
            id: 10,
            label: "11号楼",
            type: "video",
          },
        ],
      },
    ],
  },
  {
    id: 3,
    label: "桃李路社区",
    children: [
      {
        id: 7,
        label: "和顺嘉府小区",
        children: [
          {
            id: 9,
            label: "11号楼",
            type: "video",
          },
          {
            id: 10,
            label: "12号楼",
            type: "video",
          },
        ],
      },
    ],
  },
  {
    id: 3,
    label: "兴达路社区",
    children: [
      {
        id: 7,
        label: "桃园小区",
        children: [
          {
            id: 9,
            label: "31号楼",
            type: "video",
          },
          {
            id: 10,
            label: "32号楼",
            type: "video",
          },
        ],
      },
    ],
  },
  {
    id: 3,
    label: "开源路社区",
    children: [
      {
        id: 7,
        label: "元驰小区",
        children: [
          {
            id: 9,
            label: "31号楼",
            type: "video",
          },
          {
            id: 10,
            label: "32号楼",
            type: "video",
          },
        ],
      },
    ],
  },
  {
    id: 3,
    label: "圣景路社区",
    children: [
      {
        id: 7,
        label: "圣景名苑小区",
        children: [
          {
            id: 9,
            label: "31号楼",
            type: "video",
          },
          {
            id: 10,
            label: "32号楼",
            type: "video",
          },
        ],
      },
    ],
  },
];

/**
 * 打开视频
 * @param data
 */
const onOpenVideo = (data: any) => {
  const { label } = data;
  store.videoInfo = {
    isOpen: true,
    title: label,
  };
};
</script>

<style lang="scss" scoped>
.video-tree-box {
  width: 360px;
  height: 59%;
}
.video-tree-content {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden
}
.video-label {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding-right: 20px;
}
</style>
